<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
	<title>地图显示 - 区域选取</title>
	<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../jquery/jquery-migrate-1.1.1.min.js"></script><!--
	<script type="text/javascript" src="mapapi3.8.6.js"></script>-->
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="polygon.js"></script>
	<script type="text/javascript">

		// 地图服务地址
		var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"

		function LocalMapType() {}
		LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
		LocalMapType.prototype.maxZoom = 16;   //地图显示最大级别
		LocalMapType.prototype.minZoom = 4;    //地图显示最小级别
		LocalMapType.prototype.name = "本地";
		LocalMapType.prototype.alt = "显示本地地图数据";
		LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
			var img = ownerDocument.createElement("img");
			img.style.width = this.tileSize.width + "px";
			img.style.height = this.tileSize.height + "px";
			img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
			return img;
		};
		var localMapType = new LocalMapType();

		function initialize() {
			var myLatlng = new google.maps.LatLng(36.69571558689667, 117.09051073510739);
			var myOptions = {
			  center: myLatlng,
			  zoom: 13,
			  streetViewControl: false,
			 	mapTypeControlOptions: {
			        mapTypeIds: [
     		          //google.maps.MapTypeId.ROADMAP,
     		          //google.maps.MapTypeId.HYBRID,
     		          //google.maps.MapTypeId.SATELLITE,
     		          //google.maps.MapTypeId.TERRAIN,
     		          //'locaMap' //定义地图类型
			     	] 
				}
			};
			var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
			map.mapTypes.set('locaMap', localMapType);   //绑定本地地图类型
			//map.setMapTypeId('locaMap');    //指定显示本地地图
	
			var marker = new google.maps.Marker({
				position: myLatlng, 
				map: map,
				//draggable:true,
				//icon: 'mapfiles/rotate2.png',  
                //animation :google.maps.Animation.DROP,
				title:"这是一个点"
			});
	
			var infoWindow = new google.maps.InfoWindow();
	
			google.maps.event.addListener(marker, 'click', function() {
			  infoWindow.setContent("坐标位置:" + marker.getPosition().toUrlValue(6));
			  infoWindow.open(map, this);
			}); 
			 
			/////// 绘制矩形
	  
			var creator = new PolygonCreator(map);
			
			// 初始化矩形
			var triangleCoords = [];
			
			var ll = "(36.702803801572976, 117.06424654443356)(36.68532294513613, 117.07300127465817)(36.66714965408092, 117.07351625878903)(36.6707295812113, 117.077292809082)(36.67403398151529, 117.08501757104489)(36.67995401049492, 117.11557329614254)(36.71876709472927, 117.11454332788082)(36.716565458365395, 117.09634722192379)";
			var lls = ll.split(")(");
			for (i=0; i<lls.length; i++){
				ll = lls[i].replace(" ","").replace("(","").replace(")","").split(",");
				triangleCoords.push(new google.maps.LatLng(ll[0], ll[1]));
			}
			
			creator.drawPolygon(triangleCoords);
					
			// 单击矩形
			google.maps.event.addListener(creator.getPolygon(), 'click', function(event) {
				  // Since this polygon has only one path, we can call getPath()
				  // to return the MVCArray of LatLngs.
				  var vertices = this.getPath();
	
				  var contentString = '<b>当前区域</b><br>';
	
				  // Iterate over the vertices.
				  for (var i =0; i < vertices.getLength(); i++) {
					var xy = vertices.getAt(i);
					contentString += xy.lat() + ', ' + xy.lng() + '; ';
				  }
				  
				  contentString += '<br/><br/>';
	
				  // Replace the info window's content and position.
				  infoWindow.setContent(contentString);
				  infoWindow.setPosition(event.latLng);
	
				  infoWindow.open(map);
			});
			
			// 清除区域坐标
			$('#reset').click(function(){ 
				creator.destroy();
				creator=null;
				creator=new PolygonCreator(map);
			});		 
	
			// 显示区域坐标
			$('#showData').click(function(){ 
				$('#dataPanel').empty();
				if(creator.getData() == ""){
					$('#dataPanel').append('当前点坐标：' + creator.getDot());
				}else{
					$('#dataPanel').append('当前区域坐标：' + creator.getData());
				}
			});
		
			/////////////////
			
		}
	</script>
</head>
<body onload="initialize()">
	<div style="height:100%">
		<div id="side">
			<input id="reset" value="清除区域坐标" type="button" class="navi"/>
			<input id="showData"  value="显示区域坐标" type="button" class="navi"/>
			<div id="dataPanel">&nbsp;</div>
		</div>
		<div id="map_canvas" style="height:90%"></div>
	</div>
</body>
</html>
